<script setup lang="ts" name="ThemeSwitch">
import { setThemeColor } from '@/utils/color/theme'
import sun from '@/assets/svg/custom/sun.svg'
import moon from '@/assets/svg/custom/moon.svg'
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'

const { variables } = useDesign()

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)
const settingChangeHandle = () => {
  appStore.setSystemConfigCache()
}

// 明暗主题改变事件
watch(
  () => systemConfig.value.isLight,
  () => {
    setThemeColor(systemConfig.value)
  }
)
</script>

<template>
  <ElSwitch v-model="systemConfig.isLight" :class="[variables.namespace + '-skin']" inline-prompt :active-icon="sun" :inactive-icon="moon" @change="settingChangeHandle" />
</template>

<style scoped lang="scss"></style>
